<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
    Dom树： 
       在js中操作的标签称为dom对象
       在标签对象的任何操作 都需要document才能进行

    dom 获取元素：
        （通过id获取标签） 获取的是一个标签
          */
        document.getElementById('box');
//  通过标签名获取标签 获取的是一个数组形式的集合
        document.getElementsByTagName('li');
//  获取所有带有这个类名的标签  是一个数组形式的集合
        document.getElementsByClassName('li1');
//  通过选择器查找，返回第一个符合选择器的元素对象
        document.querySelector('#box')
// 通过选择器查找获取所有符合选择器条件的标签  数组集合类型
        document.querySelectorAll('ul');


Dom元素设置属性
        // 标签对象.属性名  = 值；
       
div.className = 'aaa';// 设置标签的class类名 会覆盖原有的类名

div.className = 'aaa bbb';
div.classList = 'ccc';// 设置标签的class类名 会覆盖原有的类名

div.classList.add('aaa')// 追加一个class类名
div.classList.remove('ccc')// 删除一个类名

div.classList.toggle("bbb"); // 添加或删除一个类名 有则删除 无则添加

console.log(div.classList.contains('bbb'));// 判断有没有一个类名


/* 
style是一个对象类型
            可以直接： 标签对象.style.样式属性名 = '属性值'； 添加样式

        标签对象.style = string 在把样式赋值给标签前会自动把字符串解析为样式对象，然后再赋值给style
        */
        div.style.fontSize = '20px';
        div.style.backgroundColor = 'pink';
        div.style = 'border:1px solid #000;border-radius:50%';

// 自定义属性，只会添加给标签对象，不会添加给标签
        div.index = 1;
        console.log(div.index);


// 添加自定义属性可以添加给标签 参数1是属性名  参数2是属性值
dix.setAttribute('aaa','bbb');

// 获取自定义属性的值  参数是自定义属性名
var a = div.getAttribute('aaa');

// 删除某个属性
div.removeAttribute('aaa')


/* 
标签的创建：
        用于创建标签 参数是要创建的标签名 返回值是创建出来的标签对象
不会直接添加到页面上 需要借助其它方法来添加到页面
*/
document.createElement("h1");

//将标签对象2 追加到标签对象1的末尾
标签对象1.appendChild(标签对象2)


// 将标签对象2 添加到 标签对象1内的子元素 标签对象3之前
标签对象1.inserBefore(标签对象2,标签对象3);


// 设置标签内容 会替换原本内容 不可以识别标签
h2.textContent = <a href=''>qqqqq</a>;
h2.innerText = <a href=''>qqqqq</a>;



// 设置标签内容会替换原本内容  可以识别标签

h2.innerHTML= <a href=''>aaaaaaa</a>;

// 删除h2 标签的子元素a标签





/* 
事件：

事件的添加方法：
    在浏览器中用户或者系统触发一定条件（点击按键）执行一段给定的代码
    1.通过标签属性可以进行事件的绑定，属性名是事件类型 属性值是触发事件后执行的js代码

    将 要执行的代码封装在一个全局函数内 在事件绑定的代码中调用这个函数
*/
<div onclick='text()' title = 'aaaa'></div>

// 1, 在js中获取标签对象 通过对象属性绑定事件
元素对象.事件属性 = function(){ }

// 2, 通过addEventListener 添加事件
addEventListener //事件监听
/* 
可以给一个元素添加相同的监听事件不会被覆盖

参数1 ： 事件类型
参数2： 是触发时执行的回调函数
参数3： 是否在捕获阶段执行事件  默认false
*/

事件传播机制
/* 
默认标签会从外向内的查找 然后从内向外的执行
标签从外向内查找的过程叫捕获 也可以叫捕获阶段
标签从内向外的过程叫冒泡  

事件 默认都是在冒泡阶段执行的
*/

鼠标事件
 /* 
 click  单击事件
 dblclick  双击事件
 mousedown  按下鼠标时触发
 mouseup  释放鼠标时触发
 mousemove 鼠标移动
 mouseover  移入事件  移入目标元素内的每个后代元素时 都会触发
 mouseout  移出
 mouseenter 移入事件 只有移入目标元素时会触发
 mouseleave 移出
 contextmenu  右键事件
 onwheel 滚轮事件

 */
拖拽事件
//  拖拽事件时js原生的事件  使用时在目标元素上添加draggable = 'true'即可拖动

e.clientX // 鼠标到浏览器视图窗口之间的距离
e.layerX // 相对当前坐标系的border左上角开始的坐标
e.pageX // 鼠标到文档之间的距离
e.offsetX // 鼠标到当前事件标签之间的距离
e.screenX // 鼠标到屏幕窗口


e.stopPropagation()// 阻止事件的传播
e.cancelBubble = true; // 阻止事件冒泡


e.preventDefault(); // 阻止默认事件


e.target; // 获取当前点击的元素

e.key // 键盘事件中获取按下键的键值
e.keyCode // 键盘事件中获取按下键的键码值







    </script>
</body>

</html>